import 'package:flutter/material.dart';

class StatisticsCards extends StatelessWidget {
  const StatisticsCards({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;
    final crossAxisCount = screenWidth < 800 ? 2 : screenWidth < 1200 ? 3 : 5;
    
    // كارتا ئېگىزلىكىنى تېخىمۇ كىچىكلەتتۇق
    final childAspectRatio = screenWidth < 800 ? 2.8 : 2.6;

    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 8),
      child: GridView.count(
        crossAxisCount: crossAxisCount,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
        shrinkWrap: true,
        childAspectRatio: childAspectRatio,
        physics: const NeverScrollableScrollPhysics(),
        children: [
          _buildStatCard(
            title: 'كىرىم-چىقىم',
            value: '¥ 45,678',
            change: '+12.5%',
            color: const Color(0xFF4A6FE5),
            icon: Icons.account_balance_wallet,
            index: 0,
          ),
          _buildStatCard(
            title: 'سودا سانى',
            value: '1,234',
            change: '+8.3%',
            color: const Color(0xFFFF7C4D),
            icon: Icons.shopping_cart,
            index: 1,
          ),
          _buildStatCard(
            title: 'ئامبار مىقدارى',
            value: '5,678',
            change: '-2.1%',
            color: const Color(0xFF46BDFC),
            icon: Icons.inventory_2,
            index: 2,
          ),
          _buildStatCard(
            title: 'كىرگۈزگەن مال',
            value: '789',
            change: '+5.7%',
            color: const Color(0xFFEF5350),
            icon: Icons.add_shopping_cart,
            index: 3,
          ),
          _buildStatCard(
            title: 'نىسى تەپسىلاتى',
            value: '234',
            change: '+15.2%',
            color: const Color(0xFF4CAF50),
            icon: Icons.receipt_long,
            index: 4,
          ),
        ],
      ),
    );
  }

  // بىر ستاتىستىكا كارتى
  Widget _buildStatCard({
    required String title,
    required String value,
    required String change,
    required Color color,
    required IconData icon,
    required int index,
  }) {
    final isPositiveChange = !change.startsWith('-');
    
    return AnimatedOpacity(
      duration: Duration(milliseconds: 300 + (index * 100)),
      opacity: 1.0,
      child: TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0.9, end: 1.0),
        duration: Duration(milliseconds: 400 + (index * 100)),
        curve: Curves.easeOutQuart,
        builder: (context, scale, child) {
          return Transform.scale(
            scale: scale,
            child: child!,
          );
        },
        child: MouseRegion(
          cursor: SystemMouseCursors.click,
          child: Container(
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: color.withOpacity(0.1),
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
              border: Border.all(
                color: color.withOpacity(0.1),
                width: 1,
              ),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Stack(
                children: [
                  Positioned(
                    left: 0,
                    top: 0,
                    bottom: 0,
                    width: 5,
                    child: Container(
                      color: color,
                    ),
                  ),
                  
                  Padding(
                    padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
                    child: Row(
                      children: [
                        Container(
                          width: 36, // كىچىكلەتتۇق
                          height: 36, // كىچىكلەتتۇق
                          decoration: BoxDecoration(
                            color: color.withOpacity(0.1),
                            borderRadius: BorderRadius.circular(8),
                          ),
                          child: Icon(
                            icon,
                            color: color,
                            size: 18, // كىچىكلەتتۇق
                          ),
                        ),
                        
                        const SizedBox(width: 12),
                        
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              LayoutBuilder(
                                builder: (context, constraints) {
                                  // ئەگەر كەڭلىك 200 دىن كىچىك بولسا ماۋزۇنى كۆرسەتمەيمىز
                                  if (constraints.maxWidth < 200) {
                                    return const SizedBox.shrink();
                                  }
                                  return Text(
                                    title,
                                    style: TextStyle(
                                      color: Colors.grey[700],
                                      fontSize: constraints.maxWidth < 250 ? 11 : 13,
                                      fontWeight: FontWeight.w500,
                                    ),
                                  );
                                },
                              ),
                              const SizedBox(height: 2),
                              
                              LayoutBuilder(
                                builder: (context, constraints) {
                                  return Text(
                                    value,
                                    style: TextStyle(
                                      color: Colors.grey[900],
                                      fontSize: constraints.maxWidth < 250 ? 16 : 18,
                                      fontWeight: FontWeight.bold,
                                    ),
                                    overflow: TextOverflow.ellipsis,
                                  );
                                },
                              ),
                            ],
                          ),
                        ),
                        
                        LayoutBuilder(
                          builder: (context, constraints) {
                            // ئەگەر كەڭلىك 150 دىن كىچىك بولسا پەرقنى كۆرسەتمەيمىز
                            if (constraints.maxWidth < 150) {
                              return const SizedBox.shrink();
                            }
                            return Container(
                              padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                              decoration: BoxDecoration(
                                color: isPositiveChange 
                                    ? Colors.green.withOpacity(0.1)
                                    : Colors.red.withOpacity(0.1),
                                borderRadius: BorderRadius.circular(6),
                              ),
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(
                                    isPositiveChange ? Icons.arrow_upward : Icons.arrow_downward,
                                    color: isPositiveChange ? Colors.green : Colors.red,
                                    size: 10,
                                  ),
                                  const SizedBox(width: 2),
                                  Text(
                                    change,
                                    style: TextStyle(
                                      color: isPositiveChange ? Colors.green : Colors.red,
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            );
                          },
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
} 